<template>
	<view class="pay">
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="账单详情" :autoBack="true">

			</u-navbar>
		</view>
		<view class="con-body wrap">
			<view class="main-service uni-cell-90" style="width: 94%; margin-left: 3%;">

				<view class="user-list">
					<view class="user-list-cell">
						<view
							style="width: 100%; background-color: #FFFFFF; border-radius: 15rpx;padding-bottom: 20rpx; margin-top: 20rpx; padding-left: 40rpx;padding-right: 40rpx;">
							<view>
								<text class="t_title">余额</text>
								<text class="t_content">{{price}}元</text>
							</view>
							<view style="margin-top: 20rpx;">
								<u-line></u-line>
							</view>
							<view class="d_view">
								<text class="l_title">缴费项目</text>
								<text class="d_content">{{project}}</text>
							</view>

							<view class="d_view">
								<text class="l_title">缴费单位</text>
								<text class="d_content">{{company}}</text>
							</view>

							<view class="d_view">
								<text class="l_title">户号户名</text>
								<text class="d_content">{{account}} | {{name}}</text>
							</view>

							<view class="d_view">
								<text class="l_title">用户地址</text>
								<text class="d_content">{{address}}</text>
							</view>

							<view style="margin-top: 20rpx;">
								<u-line></u-line>
							</view>

							<view style="margin-top: 20rpx;">
								<text class="t_title">充值金额</text>
							</view>

							<view>
								<u-tabs :inactiveStyle="{ color: '#999999', border: '2rpx solid #999999', 
					margin: '8rpx',
					fontSize: '38rpx',
					padding: '12rpx 24rpx',
					borderRadius: '50rpx' }" :activeStyle="{ color: '#0B868E', 
					border: '2rpx solid #0B868E', 
					margin: '8rpx',
					fontSize: '38rpx',
					padding: '12rpx 24rpx',
					borderRadius: '50rpx'}" :list="chargeAmount" :current="current" :itemStyle="tabStyle" @change="changeAmount"
									lineWidth="0"></u-tabs>

								<view style="margin-top: 20rpx;">
									<u-input placeholder="自定义缴费金额" shape="circle">
										<template slot="suffix">
											元
										</template>
									</u-input>
								</view>



							</view>
						</view>
					</view>
				</view>
			</view>

			<u-button :customStyle="btnStyle">立即充值</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				price: '1.00',
				project: '',
				company: '',
				account: '',
				name: '',
				address: '',
				amount: 0,
				current: 0,
				chargeAmount: [{
						name: '10元'
					},
					{
						name: '20元'
					},
					{
						name: '50元'
					}
				],
				tabStyle: {
					marginTop: "30rpx"
				},
				btnStyle: {
					width: '94%',
					marginLeft: '3%',
					borderRadius: '40rpx',
					marginTop: '100rpx',
					backgroundImage: "url('https://resourse.cnlhjt.com/upload/20220825/53079139ae5b67d1270fc35fefba8d1e.png')",
					backgroundSize: '100%',
					color: '#FFFFFF'
				}
			}
		},
		onLoad(options) {
			this.project = options.project;
			this.company = options.company;
			this.account = options.account;
			this.name = options.name;
			this.address = options.address;
		},
		methods: {
			changeAmount(e) {
				this.current = e.index;
			}
		}
	}
</script>

<style lang="scss">
	.title {
		justify-content: space-between;
	}

	.t_title {
		color: #666666;
		font-size: 34rpx;
	}

	.t_content {
		color: red;
		font-weight: 600;
		font-size: 42rpx;
		float: right;
	}

	.l_title {
		font-size: 32rpx;
		color: #999999;
		float: left;
	}

	.d_content {
		color: #666666;
		font-size: 32rpx;
	}

	.d_view {
		margin-top: 30rpx;
		text-align: right;
	}
</style>
